<template>
  <form-layout>
    <span slot="title">{{$t('login.reset')}}</span>
    <v-form ref="retrieveForm" v-model="valid">
      <v-text-field
        :label="$t('login.phone')"
        v-model.trim="retrieveForm.phone"
        :rules="retrieveRules.phone"
        prepend-icon="phone_iphone"
        validate-on-blur
        type="text"
        required
      ></v-text-field>
      <v-text-field
        :label="$t('login.password')"
        v-model="retrieveForm.password"
        :rules="retrieveRules.password"
        :hint="$t('login.sixChars')"
        validate-on-blur
        prepend-icon="lock"
        :append-icon="showP1 ? 'visibility' : 'visibility_off'"
        :append-icon-cb="() => (this.showP1 = !showP1)"
        :type="showP1 ? 'text' : 'password'"
        required
      ></v-text-field>
      <v-text-field
        :label="$t('login.repeatPassword')"
        v-model.trim="retrieveForm.repeatPassword"
        :rules="retrieveRules.repeatPassword"
        validate-on-blur
        :hint="$t('login.sixChars')"
        prepend-icon="lock"
        :append-icon="showP2 ? 'visibility' : 'visibility_off'"
        :append-icon-cb="() => (this.showP2 = !showP2)"
        :type="showP2 ? 'text' : 'password'"
        required
      ></v-text-field>
      <v-layout>
        <v-flex xs8 sm8 md8 lg8>
          <v-text-field
            :label="$t('login.code')"
            v-model="retrieveForm.code"
            :rules="retrieveRules.code"
            validate-on-blur
            prepend-icon="security"
            type="text"
            required
          >
          </v-text-field>
        </v-flex>
        <v-flex xs4 sm4 md4 lg4>
          <v-btn v-if="allowSendCode" @click="handleSendCode">
            {{$t('login.sendCode')}}
          </v-btn>
          <v-btn v-else :disabled="!allowSendCode">
            <v-count :from="60" :to="0" @finish="allowSendCode = true"></v-count>s内有效
          </v-btn>
        </v-flex>
      </v-layout>
      <v-btn @click="handleRetrieve" block class="primary" :disabled="!valid">{{$t('login.reset')}}</v-btn>
    </v-form>
  </form-layout>
</template>

<script>
  import VCount from '@/components/VCount'
  import FormLayout from '@/views/layout/FormLayout'
  import { validatePhone } from '@/utils/validate'
  import { sendCode, resetPassword } from '@/api/user'

  export default {
    name: 'Retrieve',
    components: { VCount, FormLayout },
    data: () => ({
      retrieveForm: {
        password: '',
        repeatPassword: '',
        phone: '',
        code: ''
      },
      retrieveRules: {
        password: [
          v => !!v || '请填写密码',
          v => v.length >= 6 || '密码长度太短'
        ],
        repeatPassword: [
          v => !!v || '请再次输入密码',
          v => v.length >= 6 || '密码长度太短'
        ],
        phone: [
          v => !!v || '填写手机',
          v => validatePhone(v) || '手机号非法'
        ],
        code: [
          v => !!v || '请填写验证码',
          v => /^[0-9]{6}$/.test(v) || '非法验证码'
        ]
      },
      allowSendCode: true,
      valid: true,
      showP1: false,
      showP2: false
    }),
    methods: {
      handleRetrieve() {
        if (this.$refs.retrieveForm.validate()) {
          if (this.retrieveForm.password !== this.retrieveForm.repeatPassword) {
            return this.$notify.warning('两次密码输入不一致')
          }
          resetPassword(this.retrieveForm).then(res => {
            switch (res.status) {
              case 200:
                this.$notify.success('密码修改成功')
                this.$router.push({ path: 'login', query: { phone: res.data.phone }})
                break
              case 227:
                this.$notify.success('验证码错误或已经失效，请重新获取')
                break
              default:
                this.$notify.warning('更新密码失败')
            }
          })
        }
      },
      handleSendCode() {
        if (!validatePhone(this.retrieveForm.phone)) {
          return this.$notify.error('无法发送验证码到非法手机号码')
        }
        if (this.retrieveForm.password !== this.retrieveForm.repeatPassword) {
          return this.$notify.warning('两次密码输入不一致')
        }
        sendCode(this.retrieveForm.phone).then(res => {
          if (res.status === 200) {
            this.allowSendCode = false
            this.$notify.success(`验证码已发送至${res.data.phone}`)
          } else {
            this.$notify.warning('60秒内不可重发哟')
          }
        })
      }
    }
  }
</script>
